<template>
  <div class="red">
    <h1>{{this.$store.state.count}}</h1>
    <h1>{{count}}</h1>
    <h1>{{this.$store.getters.formatterSex}}</h1>
    <h1>{{this.$store.getters.getByName('lisi')}}</h1>
    <div>
      <button @click="fn1()">获取count数据</button>
      <button @click="add()">自增</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    fn1 () {
      console.log(this.$store.state.count);
    },
    add () {
      //不建议大家这么去做赋值的操作
      // this.$store.state.count++;
      //我们要通过vuex  mutations 里面的方法来改变state的状态
      // this.$store.commit('add123')
      // this.$store.commit('addValue', 100)
      this.$store.dispatch('add');
    }
  }
}
</script>

<style lang="less" scoped>
.red {
  flex: 1;
  background: red;
}
</style>